<template>
  <div class="success">
    <div class="main">
      <div class="status">
        <img :src="successSrc" />
        订购成功
      </div>
      <div class="btns">
        <div
          class="exchange"
          @click="
            onChange('https://tb.ele.me/wow/alsc/mod/4ef697213f7af5c38c47db5c')
          "
        >
          去下单购买商品
        </div>
      </div>
      <div class="title">红包到账可能延迟，如有疑问请稍后再试</div>
    </div>
  </div>
</template>
<script>
export default {
  name: "common-success",
  props: {
    title: String,
  },
  data() {
    return {
      successSrc: require("@/assets/img/success.png"),
      jumpUrl: "https://tb.ele.me/wow/alsc/mod/1716d9b77e1cf8097ea4465b",
    };
  },
  created() {
    const publicPath = process.env.BASE_URL || "/";
    if (publicPath === "inside") {
      this.jumpUrl = "https://tb.ele.me/wow/alsc/mod/1716d9b77e1cf8097ea4465b";
    } else {
      this.jumpUrl =
        "https://mod2.koubei.com/p/s/i/?scheme=alipays%3A%2F%2Fplatformapi%2Fstartapp%3FappId%3D20000067%26url%3Dhttps%253A%252F%252Ftb.ele.me%252Fwow%252Falsc%252Fmod%252F1716d9b77e1cf8097ea4465b%253FenableWK%253DYES%26abv%3DNO";
    }
  },
  methods: {
    onChange(url) {
      window.open(url, "_blank");
    },
    onGetCode() {
      const regex = /^1[3-9]\d{9}$/;
      if (!this.form.telPhone) {
        this.$toast.fail("手机号码不能为空！");
        return;
      }
      if (regex.test(this.form.telPhone)) {
        this.$toast.fail("请输入正确的手机号码！");
        return;
      }
      if (regex.test(this.form.code)) {
        this.$toast.fail("请输入6位验证码！");
        return;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.success {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 1rem;
  .btns {
    display: flex;
    width: 100%;
    margin: 1rem 0;
    div {
      flex: 1;
      border-radius: 2rem;
      height: 4rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.4rem;
      font-weight: 600;
    }
    .exchange {
      background-color: #fac467;
      color: #fff;
    }
  }

  .main {
    padding: 0.8rem;
    box-sizing: border-box;
    .title {
      font-size: 0.8rem;
    }
    .status {
      font-size: 2rem;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      margin-bottom: 3rem;
      img {
        width: 6rem;
        height: 6rem;
        margin-bottom: 1rem;
      }
    }
  }
}
</style>
